<%--
  Created by IntelliJ IDEA.
  User: Wang Ziming
--%>
<%--本页面主要实现用户的注册功能--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>注册</title>

    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //初步判别输入的注册信息是否合法
            $("#registerBtn").click(function () {
                console.log("into");
                //取出邮箱、密码、姓名，判断是否为空
                var email = $("#email").val();
                var password = $("#password").val();
                var username = $("#username").val();
                //判断邮箱是否为空
                if (isEmpty(email)) {
                    $("#msg").html("请输入邮箱！");
                    return;
                }
                //判断密码是否为空
                if (isEmpty(password)) {
                    $("#msg").html("请输入密码！");
                    return;
                }
                //判断姓名是否为空
                if (isEmpty(username)) {
                    $("#msg").html("请输入姓名！");
                    return;
                }
                //手动提交
                $("#registerForm").submit();
            });
        });
        /**
         * 判断字符串是否为空：账户 / 密码
         * @param str
         * @returns {boolean}
         */
        function isEmpty(str) {
            if (str == null || str.trim() == "") {
                return true;
            }
            return false;
        }
    </script>
</head>
<body>
    <div class="outer-wrap">
        <%--/user/register方法体尚未实现；value也未填充--%>
        <form action="/user/register" method="post" id="registerForm">
            邮箱：<input type="text" id="email" name="email" value="${messageModel.object.email}"><br>
            密码：<input type="text" id="password" name="password" value="${messageModel.object.password}"><br>
            姓名：<input type="text" id="username" name="username" value="${messageModel.object.username}"><br>
            性别：<input type="text" id="sex" name="sex" value="${messageModel.object.sex}"><br>
            年龄：<input type="text" id="age" name="age" value="${messageModel.object.age}"><br>
            <span id="msg" style="font-size: 12px;color: red;">${messageModel.msg}</span><br>
            <button type="button" id="registerBtn">注册</button>
        </form>
    </div>
</body>
<%--css--%>
<link type="text/css" rel="stylesheet" href="/css/index.css">
<style>
    *{margin: 0;padding: 0}
    html,body{height: 100%}     /*这里很关键*/
    .outer-wrap{
        /*只有同时为html和body设置height: 100%时，这里的height才生效，
        并且随浏览器窗口变化始终保持和浏览器视窗等高*/
        height: 100%;
        position: relative;
        /*background-color: rgba(0, 0, 0, .5);*/
    }
    form{
        /*width: 400px;
        height: 300px;*/
        /*background-color: orange;*/
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
    }
    form span{
        margin-left: 40%;
    }
</style>
</html>
